<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ name }}</h1>
        <p>{{ age }}</p>
        <ul>
            <li>{{ name }}</li>
            <li>{{ name }}</li>
            <li>{{ name }}</li>
        </ul>
    </div>
</body>
<script>

    /*  将页面上上的插值全部使用真实的数据进行填充

        1. 获取页面的dom， 将其转换为模板

        2. 遍历模板，将模板上的插值替换为真实的数据

        3. 将模板和数据结合后的虚拟dom替换为真实的dom
    */


    let data = {
        name: '李斯',
        age: 18
    }

    // 1
    let dom = document.querySelector('#app');
    let template = dom.cloneNode(true);
    let parent = dom.parentNode;
    // debugger;


    // 2
    /*
        由于也页面上的元素可能包含子元素，因此需要使用递归的算法遍历
    */
    let req = /\{\{(.+?)\}\}/g;
    function replaceData(dom) {
        let children = dom.childNodes;      // 获取到的是节点，包含回车换行
        for (let i = 0; i < children.length; i++) {
            /* 结点的类型
                1. 元素结点
                2. 属性结点
                3. 文本结点    
                4. 注释结点
            */
            let type = children[i].nodeType;
            if (type === 1) {
                replaceData(children[i]);
            }
            else if(type === 3) {
                /* 文本结点可能包含了插值， 可以使用正则表达式进行提起 */
                let value = children[i].nodeValue;
                value = value.replace(req, (_, g)=>{
                     // g表示的是data的键，通过键获取数据
                     return data[g.trim()];
                })
                children[i].nodeValue = value;
            } 
        }
    }
    replaceData(template);
    parent.replaceChild(template, dom);

    /* 总结 
        
        1. 存在的问题
            -1 无法将复杂的数据 name.name.xx 渲染到页面上
    */

</script>
</html>